<template>
  <div>
    <div class="filter-container">
      <el-input
        v-model="listQuery.twitter_id"
        type="text"
        placeholder="动态id"
        style="width:200px"
        clearable
      />

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
      <el-button type="warning" @click="onAddTopStick">添加置顶</el-button>
    </div>
    <div class="app-container">
      <ItemTrend
        ref="trendList"
        :list="list"
        :loading="listLoading"
        type="stickTop"
        @onCheckedChange="onCheckedChange"
      />
    </div>
    <!--添加置顶-->
    <el-dialog :visible.sync="addStickVisible" :close-on-click-modal="false">
      <el-form
        :model="stickForm"
        :rules="stickFormRules"
        ref="stickForm"
        title="添加置顶"
        label-width="150px"
      >
        <el-form-item label="动态ID：" prop="twitter_id">
          <el-input type="text" v-model="stickForm.twitter_id" />
        </el-form-item>
        <el-form-item label="置顶开始时间：" prop="start_time">
          <el-date-picker
            v-model="stickForm.start_time"
            type="datetime"
            placeholder="选择日期时间："
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="置顶结束时间" prop="end_time">
          <el-date-picker
            v-model="stickForm.end_time"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addStickVisible = false">取消</el-button>
        <el-button type="primary" @click="onAddStickConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ItemTrend from "@/views/materialManage/squareContent/components/ItemTrend";
export default {
  components: { ItemTrend },
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        twitter_id: "",
        offset: 0,
        limit: 20
      },
      addStickVisible: false,
      stickForm: {
        twitter_id: "",
        start_time: "",
        end_time: "",
      },
      stickFormRules: {
        twitter_id: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        start_time: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        end_time: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.$get("trend/top", this.listQuery)
        .then((resp) => {
          this.list = resp.data.twitter_top_list;
          this.total = resp.data.count;
          this.listLoading = false;
        })
        .catch((err) => {
          this.$message.error(err.data.error.description);
        });
    },
    //添加置顶
    onAddTopStick() {
      this.addStickVisible = true;
      this.$nextTick(() => {
        this.$refs.stickForm.resetFields();
      });
    },
    onAddStickConfirm() {
      this.$refs.stickForm.validate((valid) => {
        if (valid) {
          this.$put("trend/top", this.stickForm)
            .then((resp) => {
              if (resp) {
                this.$message.success("添加成功");
                this.getList();
                this.addStickVisible = false;
              }
            })
            .catch((err) => {
              this.$message.error(err.data.error.description);
            });
        }
      });
    },
    onCheckedChange(checkedAll) {
      this.checkedAll = checkedAll;
    },
  },
};
</script>